<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>xlinkote</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="supported-color-schemes" content="light dark">
    <meta name="theme-color" content="#ffffff" />
    <link rel="manifest" href="./manifest.json">
    <link rel="icon" href="./logo/logo.svg" type="image/x-icon">
    <link rel="apple-touch-icon" href="./logo/logo.svg">
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <div id="main">
        <div id="nav">
            <div>
                <div id="绑定文件" title="绑定文件"><img src="./assets/icons/up.svg" class="icon"><input type="file"
                        name="upload" id="upload" class="hidden"></div>
                <div id="导出文件" title="导出文件"><img src="./assets/icons/down.svg" class="icon"></div>
                <div id="保存" title="保存"><img src="./assets/icons/save.svg" class="icon"></div>
                <div id="新建画布" title="新建画布"><img src="./assets/icons/add_canvas.svg" class="icon"></div>
                <div id="新建元素" title="新建元素"><img src="./assets/icons/add.svg" class="icon"></div>
                <div id="切换侧栏" title="切换侧栏"><img src="./assets/icons/side_panel.svg" class="icon"></div>
                <div id="搜索操作" title="搜索"><img src="./assets/icons/search.svg" class="icon"></div>
                <div id="撤销" title="撤销"><img src="./assets/icons/turn_left.svg" class="icon"></div>
                <div id="重做" title="重做"><img src="./assets/icons/turn_right.svg" class="icon"></div>
            </div>
            <div id="mode_bar">
                <div id="浏览" title="浏览模式"><img src="./assets/icons/edit.svg" class="icon"></div>
                <div id="设计" title="设计模式"><img src="./assets/icons/cursor.svg" class="icon"></div>
                <div id="绘制" title="绘制模式"><img src="./assets/icons/draw.svg" class="icon"></div>
            </div>
            <div class="mode_more">
                <div title="手写输入">
                    <div id="ink_icon"><img src="./assets/icons/ink.svg" class="icon"></div>
                    <canvas id="ink"></canvas>
                </div>
                <div id="select_type">
                    <div id="select_rect"><img src="./assets/icons/select_rect.svg" class="icon"></div>
                    <div id="select_free"><img src="./assets/icons/select_free.svg" class="icon"></div>
                </div>
                <div id="draw_bar">
                    <div id="颜色" title="色盘">
                        <div id="color_yl"></div>
                        <div id="penc">
                            <x-color></x-color>
                        </div>
                    </div>
                    <div id="笔" title="笔">
                        <img src="./assets/icons/pen.svg" class="icon">
                        <div>
                            <div id="粗细">
                                <x-draw-width></x-draw-width>
                            </div>
                            <label><input type="checkbox" name="缩放跟随" id="缩放跟随">缩放跟随</label>
                            <div id="笔刷">
                                <label><input type="radio" name="笔刷" id="压感" checked>压感</label>
                                <label><input type="radio" name="笔刷" id="普通">普通</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="画布">
            <div id="画布们">
                <div id="O"></div>
            </div>

            <div id="选择"></div>
            <div id="控制"></div>
            <div id="选择框"></div>
            <div id="导航" class="flex gap-2 absolute right-3 bottom-3">
                <div id="方向锁定"><img src="./assets/icons/x_y.svg" class="icon"></div>
                <div id="归位"><img src="./assets/icons/back.svg" class="icon"></div>
                <div id="缩放" class="px-1 flex items-center text-black dark:text-white relative font-mono" tabindex="0">
                    <input type="text" name="zoom" id="zoom" class="text-right">% <div id="zooms"
                        class="zoom_list_hide absolute bottom-4 flex flex-col gap-1 p-1 rounded left-0 w-full bar transition-opacity">
                    </div>
                </div>
                <div>
                    <img src="./assets/icons/minimap.svg" class="icon">
                    <div id="mini_map_p">
                        <canvas id="mini_map"></canvas>
                    </div>
                </div>
            </div>
            <div id="菜单" class="menu_hide">
                <div id="菜单_新建"><img src="./assets/icons/add.svg" class="icon">新建</div>
            </div>
        </div>
    </div>
    <div id="侧栏" class="侧栏">
        <div id="handle">
            <div></div>
        </div>
        <div id="tabs" class="icon-pel hide_scrool_bar">
            <div title="文件" class="selected_item selected_item_hide"><img src="./assets/icons/file.svg" class="icon">
            </div>
            <div title="图层与布局"><img src="./assets/icons/layout.svg" class="icon"></div>
            <div title="更多"><img src="./assets/icons/more.svg" class="icon"></div>
            <div title="markdown"><img src="./assets/icons/md.svg" class="icon"></div>
            <div title="演示"><img src="./assets/icons/play.svg" class="icon"></div>
            <div title="中转站"><img src="./assets/icons/zzz.svg" class="icon"></div>
            <div title="资源" id="资源tab"><img src="./assets/icons/assets.svg" class="icon"></div>
            <div title="值"><img src="./assets/icons/value.svg" class="icon"></div>
            <div title="偏好设置" id="偏好设置"><img src="./assets/icons/setting.svg" class="icon"></div>
        </div>
        <div id="items" class="item_hide">
            <div id="文件" class="flex flex-col items-center"></div>
            <div id="层容器" class="层容器">
                <div class="tools icon-pel flex z-10 hide_scrool_bar">
                    <div id="新建元素" title="新建元素"><img src="./assets/icons/add.svg" class="icon"></div>
                    <div id="删除元素" title="删除元素"><img src="./assets/icons/close.svg" class="icon"></div>
                    <div id="底层" title="移动到底层"><img src="./assets/icons/plow.svg" class="icon"></div>
                    <div id="下一层" title="移动到下一层"><img src="./assets/icons/pnlow.svg" class="icon"></div>
                    <div id="上一层" title="移动到上一层"><img src="./assets/icons/pntop.svg" class="icon"></div>
                    <div id="顶层" title="移动到顶层"><img src="./assets/icons/ptop.svg" class="icon"></div>
                    <div id="纵向堆叠" title="纵向堆叠"><img src="./assets/icons/flex_y.svg" class="icon"></div>
                    <div id="横向堆叠" title="横向堆叠"><img src="./assets/icons/flex_x.svg" class="icon"></div>
                    <div id="成组" title="成组"><img src="./assets/icons/group.svg" class="icon"></div>
                    <div id="转为一行" title="转为一行"><img src="./assets/icons/to_one_line.svg" class="icon"></div>
                    <div id="拆分为多行" title="拆分为多行"><img src="./assets/icons/to_more_line.svg" class="icon"></div>
                    <div id="拆分组合" title="拆分组合"><img src="./assets/icons/out_group.svg" class="icon"></div>
                </div>
                <div class="z-20 relative">
                    <div class="w-full flex" id="xywh">
                        <input type="number" name="xywh_x" id="xywh_x">
                        <input type="number" name="xywh_y" id="xywh_y">
                        <input type="number" name="xywh_w" id="xywh_w">
                        <input type="number" name="xywh_h" id="xywh_h">
                    </div>
                    <div id="el_style" class="w-full"></div>
                    <div id="switch_global_style"><img src="./assets/icons/value.svg" class="icon"></div>
                    <div id="style_com_list"></div>
                </div>
                <div id="层handle"></div>
                <div id="层"></div>
            </div>
            <div id="工具" class="tools icon-pel">
                <div id="重新加载" title="重新加载"><img src="./assets/icons/reload.svg" class="icon"></div>
                <div id="绑定文件" title="绑定文件"><img src="./assets/icons/file.svg" class="icon"></div>
                <div id="导出文件" title="导出文件"><img src="./assets/icons/down.svg" class="icon"></div>
                <div id="从云加载" title="从云加载"><img src="./assets/icons/cloud_down.svg" class="icon"></div>
                <div id="加载数据库" title="加载数据库"><img src="./assets/icons/db_up.svg" class="icon"><input type="file"
                        name="" id="db_load" class="db_load"></div>
                <div id="下载数据库" title="下载数据库"><img src="./assets/icons/db_down.svg" class="icon"></div>
                <div id="新建集" title="新建集"><img src="./assets/icons/add_file.svg" class="icon"></div>
                <div id="新建画布" title="新建画布"><img src="./assets/icons/add_canvas.svg" class="icon"></div>
                <div id="切换侧栏" title="切换侧栏"><img src="./assets/icons/side_panel.svg" class="icon"></div>
                <div id="导出图片"></div>
            </div>
            <div id="markdown" class="tools icon-pel flex flex-wrap">
                <div id="md_b"><img src="./assets/icons/b.svg" class="icon"></div>
                <div id="md_i"><img src="./assets/icons/i.svg" class="icon"></div>
                <div id="md_s"><img src="./assets/icons/s.svg" class="icon"></div>
                <div id="md_link"><img src="./assets/icons/link.svg" class="icon"></div>
                <div id="md_img"><img src="./assets/icons/img.svg" class="icon"></div>
                <div id="md_mathi"><img src="./assets/icons/mathi.svg" class="icon"></div>
                <a href="http://www.mathcha.io/editor" target="_blank" rel="noopener noreferrer"
                    class="w-full underline">mathcha.io</a>
                <x-sinppet></x-sinppet>
            </div>
            <div id="演示">
                <div id="ys_list"></div>
                <div id="ys_add"><img src="./assets/icons/add.svg" class="icon"></div>
            </div>
            <div id="中转站">
                <div id="常驻" class="icon-pel">
                    <div id="x-record" title="新建录音机"><img src="./assets/icons/record.svg" class="icon"></div>
                    <div id="x-calendar" title="新建日历"><img src="./assets/icons/calendar.svg" class="icon"></div>
                    <div id="x-time" title="新建计时器"><img src="./assets/icons/time.svg" class="icon"></div>
                    <div id="x-graph" title="新建几何容器"><img src="./assets/icons/graph.svg" class="icon"></div>
                </div>
                <div id="临时"></div>
            </div>
            <div id="资源"></div>
            <div id="值"></div>
            <div id="设置">
                <form name="webdav">
                    <fieldset>
                        <legend class="text-lg font-semibold">云（WebDAV）</legend>
                        网址<br><input type="url" name="网址" autocomplete="url">
                        <br>
                        用户名<br><input type="text" name="用户名" autocomplete="username">
                        <br>
                        密码<br><input type="text" name="密码" class="password">
                        <br>
                        自动上传
                        <select name="自动上传" id="">
                            <option value="0">手动</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="30">30</option>
                            <option value="60">60</option>
                        </select>
                        <br>
                        加密密钥<br>
                        <input type="text" name="加密密钥" placeholder="若要启用，请输入自定义密钥" class="password">
                    </fieldset>
                </form>
                <form name="ink">
                    <fieldset>
                        <legend class="text-lg font-semibold">手写识别</legend>
                        服务器<br><input type="url" name="网址" autocomplete="url">
                        <br>
                        语言<br><input type="text" name="语言">
                        <br>
                        延时<br><input type="number" name="延时" min="0.1" step="0.1">
                    </fieldset>
                </form>
                <form name="sort">
                    <fieldset>
                        <legend class="text-lg font-semibold">排序</legend>
                        方式
                        <select name="type">
                            <option value="change_time">修改时间</option>
                            <option value="create_time">创建时间</option>
                            <option value="name">文件名</option>
                        </select>
                        <br>
                        <label><input type="checkbox" name="reverse">逆序</label>
                    </fieldset>
                </form>
                <form name="ai">
                    <fieldset>
                        <legend class="text-lg font-semibold">AI</legend>
                        api key<br><input type="text" name="key">
                        <br>
                    </fieldset>
                </form>
                <form name="backup">
                    <fieldset>
                        <legend class="text-lg font-semibold">自动备份</legend>
                        频率（0为不自动备份）<br><input type="number" name="频率" min="0" step="1">天一次
                    </fieldset>
                </form>
                <div id="about">
                    <div id="about_main" class="gap-2 flex items-center justify-center"><strong>xlinkote</strong><img
                            src="./public/logo/logo.svg" width="24"></div>
                    <div id="version" class="cursor-pointer flex items-center justify-center" title="清除缓存并更新"></div>
                    <div id="about_index" class="flex justify-center items-center gap-1">项目开源地址：
                        <a href="https://github.com/xushengfeng/xlinkote/" target="_blank" rel="noopener noreferrer">
                            <img src="assets/other/Github.svg" alt="Github icon" width="16"></a>
                        <a href="https://gitee.com/xsf-root/xlinkote" target="_blank" rel="noopener noreferrer">
                            <img src="assets/other/Gitee.svg" alt="Gitee icon" width="16"></a>
                    </div>
                    <div id="about_callback"><a href="https://github.com/xushengfeng/xlinkote/issues" target="_blank"
                            rel="noopener noreferrer">报告与反馈</a></div>
                    <div id="about_licence"><a href="https://github.com/xushengfeng/xlinkote/blob/master/LICENSE"
                            target="_blank" rel="noopener noreferrer">GPL-3.0</a></div>
                    <div>
                        <a href="https://www.netlify.com" target="_blank"> <img loading="lazy"
                                src="https://www.netlify.com/v3/img/components/netlify-light.svg"
                                alt="Deploys by Netlify" class="mx-auto" /> </a>
                    </div>
                    <div>Copyright (C) 2021 xsf <a href="mailto:xushengfeng_zg@163.com">xushengfeng_zg@163.com</a></div>
                </div>
                <div>
                    <div id="导出设置" title="导出设置"><img src="./assets/icons/setting_down.svg" class="icon"></div>
                    <div id="导入设置" title="导入设置"><img src="./assets/icons/setting_up.svg" class="icon"></div>
                    <div id="放弃设置" title="放弃设置"><img src="./assets/icons/close.svg" class="icon"></div>
                </div>

            </div>
        </div>
    </div>
    <div id="breadcrumbs" class="breadcrumbs hide_scrool_bar"></div>
    <div id="搜索">
        <input type="search" id="search" autocomplete="off" spellcheck="false">
        <div id="搜索结果"></div>
        <div id="更多结果" class="search_more_hide"></div>
    </div>
    <div id="viewer" class="viewer_hide">
        <div id="viewer_children"></div>
        <div id="viewer_highlight"></div>
    </div>

    <div id="tips"></div>
    <div id="toast"></div>
</body>

<style id="css"></style>
<script type="module" src="./src/js/js.ts"></script>

</html>